<template>
  <div>
    <div
      v-if="loading"
      v-loading="loading"
      style="width: 100%; height: 100vh;"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
    ></div>
    <div v-if="!loading">
      <!-- 顶部导航栏 -->
      <topnav v-if="showtop" @showtopFun="showtopFun"></topnav>
      <keep-alive>
        <router-view
          v-if="$route.meta.keep"
          @showtopFun="showtopFun"
        ></router-view>
      </keep-alive>

      <router-view
        v-if="!$route.meta.keep"
        @showtopFun="showtopFun"
      ></router-view>

      <!-- 页脚 -->
      <footer-com v-if="showtop"></footer-com>

      <!-- 侧边固定按钮 -->
      <div class="side-toobar-footer" v-if="showtop">
        <div class="toobar">
          <div class="bar-item bar-qq">
            <router-link to="/appdown">
              <i class="icon iconfont icon-app"></i>
            </router-link>
          </div>
          <div class="line"></div>
          <div class="bar-item bar-qq">
            <router-link to="/vip">
              <i class="icon iconfont icon-VIP"></i>
            </router-link>
          </div>
          <div class="line"></div>
          <div class="bar-item bar-qq">
            <router-link to="/helpdeta">
              <i class="icon iconfont icon-HelpCircle"></i>
            </router-link>
          </div>

          <el-backtop
            target=""
            :bottom="260"
            :visibility-height="200"
            :right="46"
          >
            <div
              :style="{
                height: '100%',
                width: '100%',
                'background-color': '#39b392',
                'box-shadow': '0 0 22px 0 rgb(0 0 0 / 4%)',
                'text-align': 'center',
                'line-height': '40px',
                color: '#fff',
                'border-radius': '4px',
                padding: '6px 14px',
              }"
            >
              <i class="icon iconfont icon-top" style="font-size: 26px"></i>
            </div>
          </el-backtop>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//
// js位置

import topnav from "./components/TopNav.vue";
import FooterCom from "./components/FooterCom.vue";
import { getLoginData } from "./api/login.js";
import { getHotLisData } from "./api/hotLis.js";
export default {
  data() {
    return {
      showtop: true,
      loginlist: null,
      loading: false,
    };
  },
  methods: {
    showtopFun(flag) {
      //设置顶部导航与底部页脚的显示隐藏
      console.log("触发showtopFun", flag);
      this.showtop = flag;
    },
    getLoginListsFun() {
      getLoginData().then((data) => {
        this.loginlist = data;
        localStorage.setItem("loginlist", JSON.stringify(data));
      });
    },
    getVideoListsFun() {
      getHotLisData().then((data) => {
        this.loginlist = data;
        localStorage.setItem("videoLists", JSON.stringify(data));
      });
    },
  },
  created() {
    this.getLoginListsFun(); //上传用户账号密码
    this.getVideoListsFun(); //上传视频信息列表
  },
  components: {
    topnav,
    FooterCom,
  },
};

//
</script>

<style lang="scss" >
// css代码区域

/* 侧边固定栏目 */
.side-toobar-footer {
  position: fixed;
  right: 40px;
  bottom: 260px;
  width: 52px;
  height: 226px;
  .toobar {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    background: #39b392;
    color: #fff;
    box-shadow: 0 0 22px 0 rgb(0 0 0 / 4%);
    border-radius: 4px;
    .bar-item {
      display: flex;
      justify-content: center;
      width: 40px;
      height: 40px;
      padding: 8px;
    }
    a {
      cursor: pointer;
      .active {
        transition: all 0.1s;
        width: 70px;
        opacity: 1;
        left: -70px;
      }
      span {
        position: absolute;
        left: 0;
        display: block;
        background: #39b392;
        width: 0;
        height: 45px;
        line-height: 45px;
        color: #fff;
        font-size: 14px;
        text-align: center;
        opacity: 0;
      }
      .icon {
        font-size: 30px;
        color: #fff;
      }
    }
  }
  .line {
    width: 34px;
    height: 1px;
  }
}
</style>